<template>
  <page-header-wrapper>
    <a-card :bordered="false" class="m-b-16">
      <a-form :form="form" layout="inline">
        <a-form-item label="比对类型">
          <a-select
            style="width: 300px"
            v-decorator="['type', { rules: [{ required: true, message: '请选择比对类型' }] }]"
            :options="[
              { value: 'multiple', label: '多条对比' },
              { value: 'single', label: '单条对比' },
            ]"
          >
          </a-select>
        </a-form-item>
        <a-form-item>
          <y-button type="primary" plain @click="handleReset">重置对比</y-button>
          <y-button type="primary" plain @click="downloadDemo">下载模板</y-button>
        </a-form-item>
      </a-form>
    </a-card>
    <transition enter-active-class="page-fade-in" leave-active-class="page-fade-out" mode="out-in">
      <multiple v-if="form.getFieldValue('type') === 'multiple'" :key="key" @reset="handleReset" />
      <single v-if="form.getFieldValue('type') === 'single'" :key="key" />
    </transition>
  </page-header-wrapper>
</template>

<script>
import multiple from './components/multiple'
import single from './components/single'
export default {
  name: 'cityComplexInquireList',
  components: {
    multiple,
    single,
  },
  data() {
    return {
      key: new Date().getTime(),
      form: this.$form.createForm(this, { name: 'dataComparison' }),
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.form.setFieldsValue({
        type: 'multiple',
      })
    })
  },
  methods: {
    handleReset() {
      this.form.setFieldsValue({
        type: 'multiple',
      })
      this.key = new Date().getTime()
    },
    // 下载模版
    downloadDemo() {
      window.open(
        process.env.VUE_APP_API_BASE_URL +
          '/%E6%95%B0%E6%8D%AE%E6%AF%94%E5%AF%B9%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xls'
      )
    },
  },
}
</script>
<style lang="less" scoped>
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.page-fade-in {
  animation-duration: 400ms;
  animation-fill-mode: both;
  animation-name: fadeInUp;
}
.page-fade-out {
  animation-fill-mode: both;
  animation: fadeInUp 400ms reverse;
}
</style>
